*{
margin:0px;
padding:0px;

}
#head{
width:100%;
height:20px;
background:orange;

}
#body{
width:100%;
height:600px;
}

h1{
text-align:center;

}

.slidershow{
width:700px;
height:400px;
overflow:hidden;

}
.middle{
position:absolute;
top:37%;
left:50%;
transform:translate(-50%,-50%);
}
.navigation{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
}
.bar{
width:50px;
height:10px;
border:2px solid #fff;
margin:6px;
cursor:pointer;
transition:0.4s;
}
.bar:hover{
background:#fff;
}
input[name="r"]{
position:absolute;
visibility:hidden;
}
.slides{
width:500%;
height:100%;
display:flex;
}
.slide{
width:20%;
transition:0.6s;
}
.slide img{
width:100%;
height:100%;
}#r1:checked~.s1{
margin-left:0;
}
#r2:checked~.s1{
margin-left:-20%;
}
#r3:checked~.s1{
margin-left:-40%;
}
#r4:checked~.s1{
margin-left:-60%;
}
#r5:checked~.s1{
margin-left:-80%;
}



#call{
border:2px solid pink;
width:218px;
float:left;
margin-top:50px;
margin-left:40px;
font-size:14px;
}
#call_tit{
background:#FF8247;
height:43px;
color:#fff;
font-weight:bold;
text-align:center;
line-height:43px;
}
#call_mid{
background:linear-gradient(to bottom,#E6E6FA,#F0FFFF);
height:160px;
}
#call_btm{
background:#FFA07A;
height:11px;
}

.z{
width:400px;
height:370px;
float:right;
margin-top:20px;
margin-right:10px;
}
#box1{
width:100%;
height:40%;
left:60px;
background:url(../imger/5.jpg);
top:50px;
border:3px solid green;
}
#box2{
width:100%;
height:30%;
left:60px;
border:3px solid orange;
background:url(../imger/2.jpg);
top:50px;
}
#box3{
width:100%;
height:30%;
left:60px;
background:url(../imger/4.jpg);
border:3px solid yellow;
top:50px;
}